<template>
	<view class="view-page">
		<topNav @navBack="onNavBack" :navbar-data="navbarData"></topNav>
		<view  style="overflow-y: auto;overflow-x:hidden;"  :style="{height: `calc(100vh - ${navHeight}px)`}">
			<view class="page-content">
				<view style="height: 748rpx;">
					<swiper-dot :current="current" :dotLength="noteDetail.coverUrls && noteDetail.coverUrls.length">
						<swiper autoplay style="height: 748rpx" :interval="3000" duration="500" @change="handleSwiperChange"
							:circular="true">
							<swiper-item v-for="(item, index) in noteDetail.coverUrls" :key="index">
								<image
									mode="aspectFill"
									class="banner-img"
									:src="item"
									@click="handlePreviewImage(index)"
									:data-spmCntSuffix="'.handlePreviewImage@'"
									:data-custom="index+1"
									:data-spm="item"
								>
								</image>
							</swiper-item>
						</swiper>
					</swiper-dot>
				</view>
				<view class="note-detail-box">
					<view class="note-box">
						<view class="note-detail">
							<view class="info-title">{{ noteDetail.articleTitle }}</view>
							<view class="info-content" >
								<rich-text :nodes="noteDetail.contentText"></rich-text>
							</view>
							
							<!-- <text class="note-txt">
								{{ noteDetail.content }}
							</text> -->
						</view>
						<view class="relevant-box" v-if="noteDetail && noteDetail.travelNotesRelatedList.length > 0">
							<view class="relevant-title">商品推荐</view>
							<mentioned-item v-for="(item, index) in noteDetail.travelNotesRelatedList.slice(0, 2)"
								:key="index" :noteDetail="item" />
						</view>
						<view class="read-more">
							<view @click="toMore()"
								v-if="noteDetail.travelNotesRelatedList && noteDetail.travelNotesRelatedList.length > 2">
								查看全部
								<uni-icons type="right" color="#1A1A1A" size="12" />
							</view>
						</view>
						<!-- <view style="background: #fff">
							<view class="comment-box">
								<view class="comment-title">评论</view>
								<view class="comment-info" v-for="(item, index) in noteDetail.commentList" :key="index">
									<image class="comment-img" :src="item.userImg"></image>

									<view class="comment-details">
										<view class="name">{{ item.userName }}</view>
										<view class="txt">{{ item.txt }}</view>
										<view class="time">{{ item.date }}</view>
									</view>
								</view>
								<view class="comment-more">
									<image style="opacity: 0" class="comment-img" src="/static/123.jpg"></image>
									<view class="more">查看全部{{ noteDetail.commentCount }}条评论</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="note-bottom" v-if="false">
				<view class="note-input">
					<input class="edit-input" type="text" />
				</view>
				<view class="bot-flex">
					<image class="like_icon" src="https://cdn1.visiotrip.com/h5AndMini/like.png"></image>
					<text>{{ noteDetail.likeCount }}</text>
				</view>
				<view class="bot-flex">
					<image class="like_icon" src="https://cdn1.visiotrip.com/h5AndMini/comments.png"></image>
					<text>{{ noteDetail.commentCount }}</text>
				</view>
			</view>
		</view>
		<popup ref="popup" :safeArea="true" position="bottom" closeable titleStyle title="文中提及" @close="closeModal" needScroll>
			<view style="height:400px;overflow: auto;">
				<mentioned-item v-for="(item, index) in noteDetail.travelNotesRelatedList" :key="index"
					:noteDetail="item" :isMore="true"
					:isLast="index === noteDetail.travelNotesRelatedList.length - 1" />
			</view>
		</popup>
	</view>
</template>

<script>
import topNav from '../components/topNavBar/index.vue';
import swiperDot from '../components/swiperDot/swiperDot.vue';
import mentionedItem from '../components/mentionedItem.vue';
import popup from "../components/popupWithClose/popupWithClose.vue";
import pointData from '../utils/point'
const globalData = uni.getStorageSync("globalData");
export default {
	components: {
		topNav,
		swiperDot,
		mentionedItem,
		popup
	},
	computed: {

	},
	data() {
		return {
			navHeight: globalData.navHeight || 40,
			// 导航头组件所需的参数
			navbarData: {
				//导航栏 中间的标题
                title: "笔记详情",
                //导航栏 是否显示标题
                showTitle: true,
                // 导航栏背景色
                bgColor: '',
                posit: 'absolute',
                backColor: '#1A1A1A',
                showCapsule: 1,
                isOpacity: 0,
			},
			///是否在H5中模态弹窗模式展示
			isModalPresentation: 'false',
			imageUrl: '',
			current: 1,
			noteDetail: "",
			articleId: "",
			enterTime: new Date(),
			
			parentSpm:{
				ref:'',pre:''
			},
			shareData:{}
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		//获取分享参数
		let params = {
			bizId:options?.articleId,
			bizType: 8,
			destId: uni.getStorageSync("destItem").destinationId,
		};
		this.$aiRequest({
			url: "/app/share/getShareTokenByBizId",
			method: "POST",
			params,
		}).then((res) => {
			if(res.success){
				this.shareData = res.data
			}
		});
		// 修改store中的noteDetail数据
		// this.$store.$state.noteDetail = []
		const { articleId, publishId, isModalPresentation } = options
		this.articleId = articleId
		this.isModalPresentation = isModalPresentation
		if (this.$store.$state && this.$store.$state.parentSpm) {
		this.parentSpm = this.$store.$state.parentSpm; // 获取页面来源页信息
		}
		if (this.$store.state && this.$store.state.parentSpm) {
		this.parentSpm = this.$store.state.parentSpm; // 获取页面来源页信息
		}
		this._sendRequest(articleId, publishId)
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () { },
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		//	#ifdef H5
		const dsbridges = require('@/utils/dsbridge.js')
        let getAppSpmParam = JSON.parse(dsbridges.getAppSpmParam())
        console.log("getCurrentPages===", getCurrentPages().length)
        if (getCurrentPages().length == 1) {
            this.parentSpm = {
                ref: getAppSpmParam.events[0].spm_cnt,//上级页面点击位置
                pre: getAppSpmParam.events[0].spm_ref //上上级点击位置
            }
        }

		let spmData = {
			event_id: "2003",
			event_type: "页面离开",
			spm_cnt: `${pointData.platform}.ArticleDetail.0.0`,
			spm_ref: this.parentSpm.ref,
			spm_pre: this.parentSpm.pre,
			open_time: this.enterTime.getTime(),
			args: {
				articleId: this.articleId
			}
		}
        this.$store.commit("SET_POINT_DATA", pointData)
        this.$store.commit("SET_SPM_DATA", spmData)

        //	#endif
		this.postEventData("2002","页面进入","0.0")
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {
		this.postEventData("2003","页面离开","0.0")
	},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {
		this.postEventData("2003","页面离开","0.0")
	},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () { },
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () { },
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {
		// return this.$shareFun(this.shareData,`${this.noteDetail.articleTitle}`)
		return {
			path: `/ai/pages/notedetails/notedetails?articleId=${this.articleId}`,
			title: `${this.noteDetail.articleTitle}`,
		}
	},
	methods: {
		/**
		 * 发送事件数据
		 * @param {*} eventId 事件ID
		 * @param {*} eventType 事件名
		 * @param {*} spmCntSuffix 点位
		 * @param {*} obj 业务参数
		 */
		postEventData(eventId, eventType, spmCntSuffix,obj) {
			this.$spmFun(pointData, {
				event_id: eventId,
				event_type: eventType,
				spm_cnt: `${pointData.platform}.ArticleDetail.${spmCntSuffix}`,
				spm_pre: this.parentSpm.pre,
				spm_ref: this.parentSpm.ref,
				open_time: this.enterTime.getTime(),
				args: {
					articleId: this.articleId,
					...obj
				}
			})
		},
		// banner切换
		handleSwiperChange(e) {
			const { detail: { current } } = e
			this.current = current + 1
		},
		toMore() {
			this.$refs.popup.$refs.popup.open()
		},
		closeModal() {
			this.$refs.popup.$refs.popup.close()
		},
		async _sendRequest(articleId, publishId) {
			const that = this
			const params = {
				articleId,
				publishId,
			}
			let res = await this.$aiRequest({
				url: "/app/dest/travelNotesDetail",
				// url: "/travel/notes/detail",
				method: "POST",
				params: params
			})
			console.log(res.data)
			if (res.success) {

				this.noteDetail = res.data
			}

		},
		//跳转个人中心
		jumpTopPersonalCenter(e) {

		},
		onNavBack() {
			if (this.isModalPresentation === 'true') {
				this.$bridge.navigateDismissBack()
			}
		},
		//文中提及商品点击
		jumpDetail(e) {
			const {
				poiType: { dictValue },
				poiId
			} = e.additional.poi;
			const url = '/packageB/pages/merchantDetails/merchantDetails'
			this.$navTo(url, {
				id: poiId,
				type: dictValue,
				spm_cnt: 'wechat.goods.position@1.0',
			}, 'navigateTo')
		},
		// 预览图片
		handlePreviewImage(current) {
			console.log(current);
			let urls = this.noteDetail.coverUrls;
			uni.previewImage({
				urls,
        		current,
			});
		},
	},
	// watch: {
	// 	'noteDetail.contentText': {
	// 		handler: function(value) {
	// 			this.$nextTick(() => {
	// 				if (!document.getElementsByTagName) return;
	// 				let imgArr = document.getElementsByTagName("img")
	// 				if (imgArr.length > 0) {
	// 					for (let index = 0; index < imgArr.length; index++) {
	// 						const element = imgArr[index];
	// 						element.addEventListener("click", function() {
	// 							uni.previewImage({
	// 								urls: [imgArr[index].src],
	// 							})
	// 						})
	// 					}
	// 				}
	// 			})
	// 		}
	// 	}
	// }
};
</script>
<style lang="scss" scoped>
.banner-img {
	width: 750rpx;
	height: 100%;
}
.note-detail-box{
	border-radius: 48rpx 48rpx 0 0;
	position: relative;
	margin-top: -48rpx;
	background-color: rgba(249, 250, 245, 1);
}
.note-box {
	width: 90%;
	margin: 0 auto;
}

.note-detail {
	// border-bottom: 1rpx solid #e6e6e6;
	padding: 0 0 50rpx 0;
	overflow: hidden;

}

.note-detail .info-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 51rpx;
	padding: 20rpx 0 39rpx 0;
}

.note-detail .info-content {
	font-size: 30rpx;
	line-height: 44rpx;
}

.relevant-box .relevant-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #000000;
	line-height: 51rpx;
	padding: 50rpx 0 30rpx 0;
}

.note-bottom {
	width: 100%;
	height: 168rpx;
	background: #ffffff;
	box-shadow: 0px -1rpx 0px 0px #e6e6e6;
	border-top: 1rpx solid #cccccc;
	display: flex;
	align-items: center;
	justify-content: space-around;
}


.note-input {
	width: 400rpx;
	height: 64rpx;
	background: #f6f4f5;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #5b5b5b;
}

.edit-input {
	height: 60rpx;
	border: none;
	flex: 1;
}

.bot-flex {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.read-more {
	padding-bottom: 70rpx;
}

.read-more view {
	font-size: 26rpx;
	color: #1A1A1A;
	text-align: center;
}
</style>
